<!DOCTYPE html>
<html>
    <head>
        <title>ContextMenu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            htconfig = {
                Default: {
                    contextMenuBackground: 'rgb(240,240,240)',
                    contextMenuLabelColor: 'black',
                    contextMenuHoverBackground: 'rgb(28,161,251)',
                    contextMenuHoverLabelColor: 'black',
                    contextMenuCheckIcon: 'checkIcon',
                    contextMenuRadioIcon: 'radioIcon',
                    contextMenuSeparatorColor: 'rgb(145,165,200)',
                    contextMenuScrollerBorderColor: 'rgb(145,165,200)',
                    contextMenuBorderColor: 'rgb(145,165,200)'
                }
            }
        </script>
        <script src="../../../../lib/core/ht.js"></script>
        <script src="key.js"></script>
        <script src="../../../../lib/plugin/ht-contextmenu.js"></script>

        <script type="text/javascript">
            ht.Default.setImage('checkIcon', '');

            ht.Default.setImage('radioIcon', '');
            
            ht.Default.setImage('contextmenu_icon', "settings.png");
            var iconSrc = 'contextmenu_icon';

            function init() {
                var json = [{
                        label: "CheckMenuItems",
                        items: [{
                            label: "Check1",
                            icon: iconSrc,
                            type: "check"
                        }, { 
                            label: "Check2",
                            icon: iconSrc,
                            type: "check",
                            selected: 1
                        }, {
                            label: "Check3",
                            icon: iconSrc,
                            type: "check",
                            items: [{
                                label: "AAAA"
                            }, {
                                label: "BBBB"
                            }, {
                                label: "CCCC"
                            }, {
                                label: "DDDD"
                            }, {
                                label: "EEEE"
                            }]
                        }]
                    }, {
                        label: "RadioMenuItems",
                        items: [{
                            label: "Radio1",
                            icon: iconSrc,
                            type: "radio",
                            groupId: 1
                        }, {
                            label: "Radio2",
                            icon: iconSrc,
                            type: "radio",
                            groupId: 1
                        }, {
                            label: "Radio3",
                            icon: iconSrc,
                            type: "radio",
                            groupId: 1
                        }]
                    },
                    "separator", {
                        label: "Menu1(disabled)",
                        disabled: true
                    }, {
                        label: "Menu2",
                        action: function(item, event) {
                            alert("you clicked:" + item.label + ",this=" + this);
                        },
                        scope: "hello"
                    }, {
                        label: "Menu3",
                        icon: iconSrc,
                        action: function(item) {
                            alert(item.label);
                        },
                        items: [{
                            label: "Homepage",
                            href: "http://www.hightopo.com",
                            linkTarget: "_blank",
                            key: [Key.ctrl, Key.enter],
                            suffix: "Ctrl+Enter",
                            preventDefault: false
                        }, {
                            label: "submenu2",
                            action: function(item) {
                                alert(item.label);
                            }
                        }]
                    }
                ];
                var contextmenu = new ht.widget.ContextMenu(json);
                contextmenu.enableGlobalKey();
                contextmenu.addTo(document.getElementById("div"));
            }
        </script>
    </head>
    <body onload="init();">
        <div id="div" style="width: 200px; height: 100px; background: #ddd; text-align: center;">Right Click Here!</div>
    </body>
</html>